<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Unit Test: Animate</title>
    <script type="text/javascript" src="../scripts/dd/dd.js"></script>
    <script type="text/javascript">
    dd({
        modules:[
            "animate"
        ]
    }).event({
        load:function()
        {
            dd(dd.body).empty();
            dd.v = dd(dd.body).addElement("div", "fade");
            var b = dd(dd.body).addElement("a", "restart", {href:"#"});
            dd(b).event({
                click:function()
                {
                    dd.v.e.style.backgroundColor = "rgb(255, 255, 0)";
                    dd(dd.v).stop().animate({background:{a:0.3, g:0}, duration:3000});
                }
            });
            dd(dd.body).addElement("br");
            var e = dd(dd.body).addElement("a", "wait", {href:"#"});
            dd(e).event({
                click:function()
                {
                    dd.v.e.style.backgroundColor = "rgb(0, 0, 0, 0)";
                    dd(dd.v).animate({background:{a:1},duration:1000})
                            .wait()
                            .animate({background:{a:0},duration:1000});
                }
            });
            dd(dd.body).addElement("br");
            var d = dd(dd.body).addElement("a", "delay", {href:"#"});
            dd(d).event({
                click:function()
                {
                    dd.v.e.style.backgroundColor = "rgb(0, 0, 0, 0)";
                    dd(dd.v).animate({background:{a:0}})
                            .delay(1000)
                            .animate({background:{a:1}})
                            .delay(2000)
                            .animate({background:{a:0.2}});
                }
            });
            dd(dd.body).addElement("br");
            var c = dd(dd.body).addElement("a", "stop", {href:"#"});
            dd(c).event({
                click:function()
                {
                    dd(dd.v).stop();
                }
            });
            dd(dd.body).addElement("br");
            var c = dd(dd.body).addElement("a", "animate event", {href:"#"});
            dd(c).event({
                click:function()
                {
                    dd.v.e.style.backgroundColor = "rgb(0, 0, 0, 0)";
                    dd(dd.v).animate({background:{a:1}})
                            .wait()
                            .animate({
                                background:{a:0},
                                complete:function()
                                {
                                    dd(dd.body).addElement("div", "done");
                                }
                            });
                }
            });
            dd(dd.body).addElement("br");
            var fr = dd(dd.body).addElement("a", "Frame Animate", {href:"#"});
            dd(fr).event({
                click:function()
                {
                    dd(dd.v).animate({
                        frames:[
                            {opacity:0.2},
                            {opacity:0.18},
                            {opacity:0.16},
                            {opacity:0.14},
                            {opacity:0.12},
                            {opacity:0.10},
                            {opacity:0.08},
                            {opacity:0.06},
                            {opacity:0.05},
                            {opacity:0.03},
                            {opacity:0.02},
                            {opacity:0.01},
                            {opacity:0}
                        ],
                        complete:function()
                        {
                            dd(dd.body).addElement("div", "done");
                        }
                    });
                }
            });
        }
    });
    </script>
</head>
<body>
    Loading...
</body>
</html>
